Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@studio-freight/lenis
Advanced tools
Lenis is a smooth scroll library to normalize and smooth the scrolling experience across devices
This is our take on smooth scroll, lightweight, hard-working, smooth as butter scroll. See Demo.
using a package manager:
npm i @studio-freight/lenis
import Lenis from '@studio-freight/lenis'
using scripts:
<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
const lenis = new Lenis()
lenis.on('scroll', (e) => {
console.log(e)
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
const lenis = new Lenis()
lenis.on('scroll', (e) => {
console.log(e)
})
lenis.on('scroll', ScrollTrigger.update)
gsap.ticker.add((time)=>{
lenis.raf(time * 1000)
})
gsap.ticker.lagSmoothing(0)
See documentation for react-lenis.
Option | Type | Default | Description |
---|---|---|---|
wrapper | HTMLElement, Window | window | The element that will be used as the scroll container |
content | HTMLElement | document.documentElement | The element that contains the content that will be scrolled, usually wrapper 's direct child |
eventsTarget | HTMLElement, Window | wrapper | The element that will listen to wheel and touch events |
lerp | number | 0.1 | Linear interpolation (lerp) intensity (between 0 and 1) |
duration | number | 1.2 | The duration of scroll animation (in seconds). Useless if lerp defined |
easing | function | (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) | The easing function to use for the scroll animation, our default is custom but you can pick one from Easings.net. Useless if lerp defined |
orientation | string | vertical | The orientation of the scrolling. Can be vertical or horizontal |
gestureOrientation | string | vertical | The orientation of the gestures. Can be vertical , horizontal or both |
smoothWheel | boolean | true | Whether or not to enable smooth scrolling for mouse wheel events |
syncTouch | boolean | false | Mimic touch device scroll while allowing scroll sync (can be unstable on iOS<16) |
syncTouchLerp | number | 0.075 | Lerp applied during syncTouch inertia |
touchInertiaMultiplier | number | 35 | Manage the the strength of syncTouch inertia |
wheelMultiplier | number | 1 | The multiplier to use for mouse wheel events |
touchMultiplier | number | 1 | The multiplier to use for touch events |
normalizeWheel | boolean | false | Normalize wheel inputs across browsers (not reliable atm) |
infinite | boolean | false | Enable infinite scrolling! (See example) |
autoResize | boolean | true | Resize instance automatically based on ResizeObserver . If false you must resize manually using .resize() |
Property | Type | Description |
---|---|---|
animatedScroll | number | Current scroll value |
dimensions | object | Dimensions instance |
direction | number | 1 : scrolling up, -1 : scrolling down |
emitter | object | Emitter instance |
options | object | Instance options |
targetScroll | number | Target scroll value |
time | number | Time elapsed since instance creation |
actualScroll | number | Current scroll value registered by the browser |
velocity | number | Current scroll velocity |
isHorizontal (getter) | boolean | Whether or not the instance is horizontal |
isScrolling (getter) | boolean | Whether or not the scroll is being animated |
isSmooth (getter) | boolean | Whether or not the scroll is animated |
isStopped (getter) | boolean | Whether or not the user should be able to scroll |
limit (getter) | number | Maximum scroll value |
progress (getter) | number | Scroll progress from 0 to 1 |
rootElement (getter) | HTMLElement | Element on which Lenis is instanced |
scroll (getter) | number | Current scroll value (handles infinite scroll if activated) |
className (getter) | string | rootElement className |
Method | Description | Arguments |
---|---|---|
raf(time) | Must be called every frame for internal usage. | time : in ms |
scrollTo(target, options) | Scroll to target. | target : goal to reach
options
|
on(id, function) | id can be any of the following instance events to listen. | |
stop() | Pauses the scroll | |
start() | Resumes the scroll | |
resize() | Compute internal sizes, it has to be used if autoResize option is false . | |
destroy() | Destroys the instance and removes all events. |
Event | Callback Arguments |
---|---|
scroll | Lenis instance |
html.lenis, html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
<div data-lenis-prevent>scroll content</div>
<div data-lenis-prevent-wheel>scroll content</div>
<div data-lenis-prevent-touch>scroll content</div>
<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>
This set of hooks is curated and maintained by the darkroom.engineering team:
FAQs
Lenis is a smooth scroll library to normalize and smooth the scrolling experience across devices
The npm package @studio-freight/lenis receives a total of 21,042 weekly downloads. As such, @studio-freight/lenis popularity was classified as popular.
We found that @studio-freight/lenis demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.